// 1.样式重置 less可以引入其他less文件
@import "reset";
// 1.1引入pc端滚动条美化，移动端看不到滚动条的
@import "scroll";

//2. 基础代码 原子类
*{
    box-sizing: border-box;
}
.clearfix::after {
    content: '';
    display: block;
    clear:both;
}
.fl {
    float: left;
}
.fr {
    float: right;
}
html, body {
    height: 100%;
}
body {
    font-size: 14px;
    background-color: red;
    font-family: '微软雅黑';
    width: 100%;
}
// 3.自己的业务代码
.container {
    display: flex;
    flex-direction: column;
    width: 720px;
    height: 100%;
    margin: 0 auto;
    background-color: #F8F8F8;
    .top {
        width: 100%;
        height: 96px;
        line-height: 96px;
        text-align: center;
        font-weight: SC-Bold;
        font-size: 36px;
        color: #000000;
        background-color: #FFFFFF;

    }
    .content {
        // 头部和底部之外的部分全给中间
        overflow-x: hidden;
        overflow-y: auto;
        background-color:yellow;
        .nav{
            display: flex;
            flex-direction: column;
        }
    }
}
